<script lang="jsx" setup>
import { ref, watch } from 'vue';
import { printPdf } from '@/service/api/modules/engineering-manage/engineering-data-inquiry';
import ProductionToolsTable from './production-tools-table.vue';

const props = defineProps({
  prodId: {
    type: String,
    required: true
  },
  moduleData: {
    type: Object,
    default: () => null
  },
  processList: {
    type: Array,
    default: () => []
  }
});

const processTableData = ref(props.processList);

watch(
  () => props.processList,
  val => {
    processTableData.value = [...processTableData.value, ...val];
  },
  {
    deep: true
  }
);

const tableRef = ref(null);
const searchParams = ref({
  prodId: props.prodId
});

const stateLabels = {
  0: '编写',
  1: '更改',
  2: '待处理',
  3: '编写中',
  4: '暂停',
  5: '已回退',
  6: '反审核',
  7: '审核中',
  8: '已上网',
  9: '完成',
  10: '取消',
  11: '外部ECN',
  12: '外部ECN待处理',
  13: '内部ECN',
  19: '样板转生产',
  20: 'ENC更改',
  25: '报废',
  27: '申请',
  28: '入库',
  29: '发放',
  34: '归还',
  35: '接收',
  36: '审核',
  37: '确认',
  100: 'PPC审核'
};

function getTextColor(v) {
  let state = Number(v);
  if (state === 1409171046440000 || state === 1609131645440000)
    // 流程初审
    state = 2;
  else if (state === 1409171046540000 || state === 1409191117540000)
    // 流程复审
    state = 3;
  else if (state === 1610130953480000 || state === 1409191117380000)
    // 签名
    state = 4;

  switch (Number(state)) {
    case -1:
      return '#FF0000';
    case 0:
      return '#0080FF';
    case 1:
      return '#FFA500';
    case 2:
      return '#FF8000';
    case 3:
      return '#B15BFF';
    case 4:
      return '#73BF00';
    case 5:
      return '#8E8E8E';
    case 6:
      return '#BEBEBE';
    case 7:
      return '#FF0000';
    case 8:
      return '#4682B4';
    case 9:
      return '#0000FF';
    case 10:
      return '#007500';
    default:
      return '#0000FF';
  }
}

const centerColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'state',
    dataIndex: 'state',
    title: '状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130,
    customRender: ({ record }) => {
      let state = Number(record.state);

      if (state === 1409171046440000 || state === 1609131645440000)
        // 流程初审
        state = 2;
      else if (state === 1409171046540000 || state === 1409191117540000)
        // 流程复审
        state = 3;
      else if (state === 1610130953480000 || state === 1409191117380000)
        // 签名
        state = 4;

      if (state === 8) {
        return (
          <div class="h-full w-full" title="已上网" style={{ color: getTextColor(record.state) }}>
            已上网
          </div>
        );
      }
      return (
        <div class="h-full w-full" title={stateLabels[state] || ''} style={{ color: getTextColor(record.state) }}>
          {stateLabels[state] || ''}
        </div>
      );
    }
  },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '工艺名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'repeatCount',
    dataIndex: 'repeatCount',
    title: '工步',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'wipPnlQty',
    dataIndex: 'wipPnlQty',
    title: 'PNL结存',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'wipSetQty',
    dataIndex: 'wipSetQty',
    title: 'SET结存',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'wipScrapSet',
    dataIndex: 'wipScrapSet',
    title: '含废SET',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'wipscrapPcs',
    dataIndex: 'wipscrapPcs',
    title: '含废PCS',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'waitQty',
    dataIndex: 'waitQty',
    title: '待产数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'workQty',
    dataIndex: 'workQty',
    title: '在产数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'finishQty',
    dataIndex: 'finishQty',
    title: '完成数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'applyScrapQty',
    dataIndex: 'applyScrapQty',
    title: '报废申请',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'applyReworkQty',
    dataIndex: 'applyReworkQty',
    title: '重工申请',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'assitQty',
    dataIndex: 'assitQty',
    title: '外发数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'delayDate',
    dataIndex: 'delayDate',
    title: '结存小时',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  }
];

const centerRemark = ref('工艺备注');

const productionToolsTable = ref(null);

function handleTableLoadSuccess(data) {
  if (!data.length) return;
  tableRef.value.setCurrentRowId(data[0]);
  handleRowClick(data[0]);
}

function handleRowClick(row) {
  centerRemark.value = row?.remark?.replace(/\n/g, '<br>');
  productionToolsTable.value.getData({
    prodId: props.moduleData.prodId,
    techId: row.techId
  });
}

const visible = ref(false);
const previewData = ref(null);
const previewTitle = ref(null);
const isLocalHost = window.location.hostname === 'localhost';

function handlePreview(data) {
  visible.value = true;
  previewTitle.value = `${props.moduleData.moduleNo}-${data.record.techName}工程指示数据.pdf 预览`;
  previewData.value = `${isLocalHost ? 'http://192.168.166.169:9999/dev-api/' : '/dev-api/'}erpsyncmes/mi/print/getPdf?prodId=${props.moduleData.prodId}&techId=${data.record.techId}`;
  data.hidePopup();
}

function handleDownload(data) {
  printPdf(
    {
      prodId: props.prodId,
      techId: data.record.techId
    },
    `${props.moduleData.moduleNo}-${data.record.techName}`
  );
  data.hidePopup();
}
</script>

<template>
  <div class="process-information h-full w-full">
    <ARow class="h-full w-full" :gutter="16">
      <ACol :span="8" class="h-full">
        <Table
          ref="tableRef"
          v-model:searchParams="searchParams"
          :column="centerColumn"
          :show-row-selection="false"
          row-key="flowId"
          :scroll="{ y: 'auto' }"
          :is-init-get-data="false"
          url="/erpsyncmes/Mi/findPubtechnology"
          :auto-generate-uuid="false"
          :is-pagination="false"
          class="h-full"
          :data-source="processTableData"
          @table-row-click="handleRowClick"
          @table-data-load-sucess="handleTableLoadSuccess"
        >
          <template #title><span class="color-#646cff">制作流程</span></template>
          <template #footer>
            <div class="footer-content h-170px overflow-auto p-b-30px text-14px" v-html="centerRemark"></div>
          </template>

          <template #contextmenuPopup-orter="{ args }">
            <li class="popup-item" @click="handleDownload(args)">
              <SvgIcon local-icon="download" class="text-16px" />
              下载
            </li>
            <li class="popup-item" @click="handlePreview(args)">
              <SvgIcon local-icon="preview" class="text-16px" />
              预览
            </li>
          </template>
        </Table>
      </ACol>
      <ACol :span="16" class="h-full">
        <ProductionToolsTable ref="productionToolsTable" />
      </ACol>
    </ARow>

    <FileViwer v-model:visible="visible" :url="previewData" type="pdf" pdf-use-iframe :title="previewTitle" />
  </div>
</template>

<style lang="scss" scoped></style>
